:root {
  -webkit-font-smoothing: antialiased;
}
:root,
body {
  margin: 0;
  padding: 0;
}

// 暂定
@media (prefers-color-scheme: dark) {
  .app-main {
    background: #232428;
    color: #fff;
  }
  .md-directory li {
    color: #c2c2c2;
    &.active {
      color: #fff;
    }
    &:hover {
      background: #626262;
    }
  }
  .md-editor {
    position: relative;
    box-sizing: border-box;
    .toastui-editor-defaultUI {
      border-radius: 0;
      border: #1a2229;
    }
  }
  code[class*='language-'],
  pre[class*='language-'] {
    text-shadow: none;
  }
  .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
    background: #191a12 !important;
  }
}
.toastui-editor-defaultUI-toolbar {
  border: 0;
}
.token.operator {
  background: none;
}
@media (prefers-color-scheme: light) {
  .md-directory li {
    color: #383838;
    &.active {
      color: black;
    }
    &:hover {
      background: #f5f5f5;
    }
  }
  .toastui-editor-defaultUI {
    border: none;
    .toastui-editor-main-container {
      background-color: #fbfbfb;
      .toastui-editor-ww-container {
        background-color: #fbfbfb;
      }
    }
  }
  .toastui-editor-mode-switch {
    border-top: 1px solid #ebedf2;
    background-color: #fbfbfb;
  }
  .toastui-editor-defaultUI-toolbar {
    background: none;
  }
  .toastui-editor-main-container {
    background: #fefeff;
  }
  .toastui-editor-defaultUI-toolbar button {
    border-color: transparent;
  }
}

// 字体
.toastui-editor-contents,
.toastui-editor-defaultUI,
.ProseMirror,
.toastui-editor-md-code,
.toastui-editor-md-code-block,
.toastui-editor-contents pre,
.toastui-editor-contents code,
.toastui-editor-tooltip,
code[class*='language-'],
pre[class*='language-'] {
  font-family: system-ui;
}

// 滚动条美化
:root:not(.mac) {
  /*滚动条宽或高*/
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /*正常情况下滑块的样式*/
  ::-webkit-scrollbar-thumb {
  }

  /*正常时候的主干部分*/
  &::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: transparent;
  }

  * {
    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
    &:hover::-webkit-scrollbar-thumb {
      background-color: #9093995e;
      border-radius: 3px;
    }

    /*鼠标悬浮在滑块上时滑块的样式*/
    &::-webkit-scrollbar-thumb:hover {
      background-color: #90939983;
      border-radius: 3px;
    }

    /*鼠标悬浮在滚动条上的主干部分*/
    &::-webkit-scrollbar-track:hover {
      background-color: transparent;
    }
  }
}
